<template>
  <div>
    <div id="box">
      <p id="title">任务计划列表</p>
      <div class="planAdd">
        <el-input
          v-model="input"
          placeholder="请输入内容"
          @keydown.enter.native="fn"
        ></el-input>
        <p>还有{{num}}条任务未完成</p>
        <el-button type="primary">全部任务</el-button>
        <el-button type="success" @click=done>已完成的任务</el-button>
        <el-button type="danger">未完成的任务</el-button>
      </div>
      <div class="planList">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          @row-click='getrow'
        >
        
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="任务列表"  >
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableObj: {
        id:0,
        date: "",
        isck:false
      },

      input: "",
      tableData: [],
      multipleSelection: [],
      num:'',
      tableRow:{},
      doneobj:{}
    };
  },
  
  methods: {
    fn() {
      if (this.input) {
          this.num=this.tableData.length+1
        this.tableObj.date = this.input;
        const obj = { ...this.tableObj };
        this.tableData.push(obj);
        this.input = "";
      } else {
        this.$message({
          message: "请输入您的计划内容",
          type: "warning",
        });
      }
    },
    getrow(row){
      this.tableRow=row
      console.log(this.tableRow)
    },
    handleSelectionChange(val) {
        this.multipleSelection=val
        val.forEach(item=>{
          console.log(item)
        })
      this.num-=this.multipleSelection.length
      this.tableRow.isck=!this.tableRow.isck
      console.log(this.tableRow)
      if(this.num<=0){
          this.num=0
      }
    },
    done(){
      console.log(111)
    }
  },
};
</script>

<style lang="less" scoped>
#box {
  width: 500px;
  height: 300px;
  border: 1px solid;
}
#title {
  font-weight: bolder;
  font-size: 20px;
  color: #fff;
  line-height: 30px;
  width: 100%;
  height: 30px;
  background-color: red;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>